<template>
	<div>
		<div class="tabNav">
			<router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
			<router-link to="/lhyg">
				<b class="colors">/<img src="../assets/img/sidebar2.png" />灵活用工平台</b>
            </router-link>
			<b>/<i style="font-size: 16px;margin: 0 5px;" class="el-icon-s-order"></i>灵活用工平台详情</b>
			<!-- <el-input placeholder="请输入灵活用工平台名称进行搜索" suffix-icon="el-icon-search" v-model="query">
			</el-input> -->
			<em v-if="SelectPlatformData != null || Object.keys(SelectPlatformData).length > 0" style="margin-left: -5px;">{{ SelectPlatformData.name }}</em>
		</div>
		<el-row :gutter="24" style="margin-bottom: 20px">
			<el-col :span="24">
				<el-card shadow="hover" :body-style="{ padding: '0px' }">
					<div class="pad-loader" v-if="SelectPlatformData == null || Object.keys(SelectPlatformData).length == 0">
						<content-loader :width="710" :height="300" :speed="3" primaryColor="#f3f3f3" secondaryColor="#ecebeb">
							<rect x="98" y="20" rx="6" ry="6" width="300" height="10" />
							<rect x="98" y="50" rx="6" ry="6" width="352" height="10" />
							<rect x="0" y="100" rx="6" ry="6" width="710" height="10" />
							<rect x="0" y="130" rx="6" ry="6" width="680" height="10" />
							<rect x="0" y="160" rx="6" ry="6" width="478" height="10" />
							<circle cx="40" cy="40" r="40" />
						</content-loader>
					</div>
					<div v-else>
						<div class="information">
							<img class="infoImg" src="../assets/img/img.jpg" />
							<div class="infoTit">
								<b>{{ SelectPlatformData.name }}</b>
								<span>法定代表人：{{ SelectPlatformData.legalName }}</span>
								<span style="border: 0; margin-left: 10px">成立时间：{{ format('yyyy-MM-dd', new Date(SelectPlatformData.createTime)) }}</span>
							</div>
						</div>
						<div class="infoCon">
							<b><em>企业类型：</em>{{ $store.state.companyType[SelectPlatformData.businessType] }}</b>
							<b><em>经营状态：</em>{{ $store.state.managementState[SelectPlatformData.operationStatus] }}</b>
							<b><em>统一社会信用代码：</em>{{ SelectPlatformData.socialCreditCode }}</b>
							<b><em>所属行业：</em>{{ $store.state.industry[SelectPlatformData.industyCode] }}</b>
							<b><em>营业期限：</em>{{ format('yyyy-MM-dd', new Date(SelectPlatformData.createTime)) + ' 至 ' + format('yyyy-MM-dd', new Date(SelectPlatformData.endTime)) }}</b>
							<b><em>登记机关：</em>{{ SelectPlatformData.registerUnit }}</b>
							<b><em>企业地址：</em>{{ SelectPlatformData.address }}</b>
							<b style="width: 100%">
								<em>经营范围：</em>
								<i>{{ SelectPlatformData.businessScope }}</i>
							</b>
							<b style="width: 100%">
								<em>营业执照照片：</em>
								<span style="padding-top:0; text-align:left" v-if="SelectPlatformData.licenseUrl == null">-</span>
								<div v-else class="image-box">
									<el-image :preview-src-list="[SelectPlatformData.licenseUrl]" :src="SelectPlatformData.licenseUrl"></el-image>
								</div>
							</b>
							<b>
								<em>合同/协议：</em>
								<span style="padding-top:0; text-align:left" v-if="SelectPlatformData.agreementUrl == null">-</span>
								<a v-else style="color:#326CF0;cursor:pointer" @click="openUrl(SelectPlatformData.agreementUrl)">业务合作协议</a>
								<!-- <a :href="SelectPlatformData.agreementUrl" target="_blank">平台合作协议</a> -->
							</b>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">企业信息
						<router-link to="/business">
							<b>更多<i class="el-icon-arrow-right"></i></b>
						</router-link>
						<em><i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i><span
								style="border: 0">入驻企业数量：{{ bussinessNumber }}家</span></em>
					</div>
					<business-table :platformId="$route.query.id"></business-table>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">任务信息
						<router-link to="/assignment">
							<b>更多<i class="el-icon-arrow-right"></i></b>
						</router-link>
						<em v-if="taskNumber !== null && Object.keys(taskNumber).length > 0">
							<i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i>
							<span>发布任务总数量：{{ taskNumber.taskNum }}</span>
							<span>进行中任务：{{ taskNumber.hanldingTaskNum }}</span>
							<span style="border: 0">已结束任务：{{ taskNumber.finishedTaskNum }}</span>
						</em>
					</div>
					<v-tasktable :platformId="$route.query.id"></v-tasktable>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">服务者信息
						<router-link to="/service">
							<b>更多<i class="el-icon-arrow-right"></i></b>
						</router-link>
						<em><i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i><span
								style="border: 0">入驻服务者数量：{{ sevicerNumber }}人</span></em>
					</div>
					<service-table :platformId="$route.query.id"></service-table>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">个体工商户信息
						<router-link to="/Individual">
							<b>更多<i class="el-icon-arrow-right"></i></b>
						</router-link>
						<em><i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i><span
								style="border: 0">入驻个体工商户数量：{{ selfBusinessNumber }}人</span></em>
					</div>
					<individual-table :platformId="$route.query.id"></individual-table>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">结算信息
						<router-link to="/settlement">
							<b>更多<i class="el-icon-arrow-right"></i></b>
						</router-link>
						<em><i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i><span
								style="border: 0">结算数量：{{ getSelectSettleNum }}</span></em>
					</div>
					<settlement-table :platformId="$route.query.id"></settlement-table>
				</el-card>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-card class="cardTits cardTitss cardTitee" shadow="hover">
					<div class="cardTit">发票信息
						<router-link to="/invoice">
							<b>更多<i class="el-icon-arrow-right"></i></b>
						</router-link>
						<em v-if="Object.keys(fapiaoNumber).length > 0"><i style="font-size: 16px;margin-right: 5px;"
								class="el-icon-s-data"></i>
								<span>发票总数量：{{ fapiaoNumber.allBillNum }}</span><span>普通增值税发票：{{ fapiaoNumber.specialBillNum }}</span><span
								style="border: 0">专项增值税发票：{{ fapiaoNumber.generalBillNum }}</span></em>
					</div>
					<invoice-table :invoiceType="1" :platformId="$route.query.id"></invoice-table>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	// 企业信息
	import BusinessTable from '../components/table/BusinessTable.vue'
	// 任务信息
	import vTasktable from '../components/table/Tasktable.vue'
	// 服务者信息
	import ServiceTable from '../components/table/ServiceTable.vue'
	// 个体工商户信息
	import IndividualTable from '../components/table/IndividualTable.vue'
	// 结算信息
	import SettlementTable from '../components/table/SettlementTable.vue'
	// 发票信息
	import InvoiceTable from '../components/table/InvoiceTable.vue'
	// 内容占位符
	import {
		ContentLoader
	} from 'vue-content-loader'
	export default {
		name: "dashboard",
		data() {
			return {
				query: '', // 搜索
				SelectPlatformData: {}, // 灵活用功平台信息
				bussinessNumber: 0, // 入住企业数量
				taskNumber: {}, // 任务数量
				sevicerNumber: 0, // 服务者数量
				selfBusinessNumber: 0,
				getSelectSettleNum: 0,
				fapiaoNumber: {},
				businessTypeMsg: {
					0: "其他",
					1: "个体工商户",
					2: "有限责任公司",
					3: "股份有限责任公司",
					4: "合伙企业",
					5: "个人独资企业",
				}
			};
		},
		components: {
			BusinessTable,
			vTasktable,
			ServiceTable,
			IndividualTable,
			SettlementTable,
			InvoiceTable,
			ContentLoader
		},
		computed: {
			role() {
				return this.name === "admin" ? "超级管理员" : "普通用户";
			}
		},
		mounted() {
			this.getSelectPlatform()
			this.getBussinessNumber()
			this.getTaskNumber()
			this.getsevicerNumber()
			this.getselfBusinessNumber()
			this.getSelectSettleNumByPlatformId()
			this.selectInvoiceNumBy()
		},
		methods: {
			openUrl(url) {
				// 打开新窗口查看pdf
				this.$http({
					url: "/api/quick/server/consumer/pdfPreView",
					method: "post",
					params: {
						ossPath: url
					},
					responseType: 'blob'
				}).then((data) => {
					const blob = new Blob([data]);
					const href = window.URL.createObjectURL(blob)
					window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
				});
			},
			getSelectPlatform() {
				// 获取灵活用功平台信息
				this.$http({
					url: '/api/platform/selectPlatformById?platformId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.SelectPlatformData = data.result
					}
				})
			},
			getBussinessNumber() {
				// 获取入驻企业数量
				this.$http({
					url: '/api/platform/selectBusinessCountByPlatformId?platformId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.bussinessNumber = data.result
					}
				})
			},
			getTaskNumber() {
				// 获取任务数量
				this.$http({
					url: '/api/platform/selectTaskCountByPlatformId?platformId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.taskNumber = data.result
					}
				})
			},
			getsevicerNumber() {
				// 获取服务者数量
				this.$http({
					url: '/api/platform/selectSevicerCountByPlatformId?platformId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.sevicerNumber = data.result
					}
				})
			},
			getselfBusinessNumber() {
				// 获取入驻个体户数量
				this.$http({
					url: '/api/platform/selectSelfBusinessCountByPlatformId?platformId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.selfBusinessNumber = data.result
					}
				})
			},
			getSelectSettleNumByPlatformId() {
				// 获取结算数量
				this.$http({
					url: '/api/platform/selectSettleNumByPlatformId?platformId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.getSelectSettleNum = data.result
					}
				})
			},
			selectInvoiceNumBy() {
				// 获取发票数量
				this.$http({
					url: '/api/platform/selectInvoiceNumByPlatformId?platformId=' + this.$route.query.id,
					method: 'post',
					headers: {
						'Content-Type': 'application/json'
					}
				}).then(data => {
					if(data.code === 0) {
						this.fapiaoNumber = data.result
					}
				})
			}
		}
	};
</script>
